<template>
  <div class="transQuery_main">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="会员编号" v-model="query.merchantMemberNo" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding: 0">
          <a-form-item>
            <a-input placeholder="合作机构号" v-model="query.agentCode" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding: 0">
          <a-form-item>
            <a-input placeholder="客户名称" v-model="query.memberName" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-select
              placeholder="审核状态"
              :options="SettleStatusList"
              v-model="query.status"
            ></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="4">
          <a-form-item>
            <a-input placeholder="终端号" v-model="query.terminalNo" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding: 0">
          <a-form-item>
            <a-input placeholder="起始SN设备号" v-model="query.startSncode" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1" style="padding: 0">
          <a-form-item>
            <a-input placeholder="结束SN设备号" v-model="query.endSncode" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 20px">
        <a-col :span="9" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch"
                >查询</a-button
              >
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="reset"
                >重置</a-button
              >
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="(record) => record.transOrderNo"
    >
      <span slot="status" slot-scope="record">
        <span v-if="record.status == 1">开启</span>
        <span v-if="record.status == 0">关闭</span>
      </span>
      <span slot="action" slot-scope="record">
        <span
          @click="goDetail(record.id, record.status)"
          style="color: #1890ff; cursor: pointer"
          >详细</span
        >
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "会员编号",
    dataIndex: "merchantMemberNo",
    width: "16%",
    align: "center",
  },
  {
    title: "合作机构号",
    dataIndex: "agentCode",
    width: "10%",
    align: "center",
  },
  { title: "终端号", dataIndex: "terminalNo", width: "10%", align: "center" },
  { title: "客户名称", dataIndex: "memberName", width: "16%", align: "center" },
  { title: "SN设备号", dataIndex: "sncode", width: "16%", align: "center" },
  { title: "绑定时间", dataIndex: "ctime", width: "16%", align: "center" },
  {
    title: "终端状态",
    scopedSlots: { customRender: "status" },
    width: "16%",
    align: "center",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: "16%",
    align: "center",
  },
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      momentDate: moment(new Date()),
      excelurl: "",
      statusList: [],
      SettleStatusList: [
        { value: null, label: "全部" },
        { value: 1, label: "开启" },
        { value: 0, label: "关闭" },
      ],
      transTypeList: [],
      query: {
        merchantMemberNo: null,
        memberName: null,
        status: null,
        agentCode: null,
        startSncode: null,
        endSncode: null,
        terminalNo: null,
        current: 1,
        pageSize: 10,
      },
      pagination: { current: 1, total: 1, pageSize: 10 },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 },
        },
      },
    };
  },
  watch: {},
  filters: {
    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    
    if (this.$route.query && this.$route.query.id) {
      this.query.merchantMemberNo = this.$route.query.id;
    }
    this.handleSearch();
  },
  methods: {
    moment,
    onPageChange: function (page, pageSize) {

      this.query.current = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },

    reset() {
      this.query = {
        merchantMemberNo: null,
        memberName: null,
        status: null,
        agentCode: null,
        startSncode: null,
        endSncode: null,
        terminalNo: null,
        current: 1,
        pageSize: 10,
      };
    },
    handleSearch() {
      this.loading = true;
      console.info(this.query);
      this.$axios.post("/agent/terminal/queryList", this.query).then((res) => {
        console.info(res);
        this.loading = false;
        if (res.data.code == "OK") {
          this.list = res.data.list;
          this.pagination.current = res.data.current;
          this.pagination.total = res.data.total;
        } else {
          this.list = [];
          this.pagination.current = 1;
          this.pagination.total = 1;
          return false;
        }
      });
    },
    goDetail(id, status) {
      console.log(id);
      // this.$router.push(`/org/transmanage/${id}/transquerydetail`)
      this.$router.push(
        "/Terminal/terminalInfoQueryDetail/" + status + "/" + id
      );
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}
</style>